<template>
	<div class="searchinput">
		<Notice></Notice>
		<u-navbar :is-back="true" title="全网搜">
			<view class="navbar-slot flex">
				<span class="search" @click="search">搜索</span>
			</view>
		</u-navbar>
		<div class="title flex">
			<span class="text">关键词</span>
			<i class="filter" @click="openFilter"></i>
		</div>
		<u-input v-model="params.top_search_value" type="textarea" :border="true" placeholder="请输入关键词" />
		<div class="title flex" v-if="!!historyWords.length">
			<span class="gray">历史搜索</span>
			<span class="clear" @click="clear">清空所有</span>
		</div>
		<div class="history flex" v-if="!!historyWords.length">
			<span class="kw" v-for="(item, index) in historyWords" :key="index" @click="historySearch(item)">{{ item }}</span>
		</div>
		<div class="title flex">
			<span class="text">排除词</span>
		</div>
		<u-input v-model="params.exclude_word" type="text" :border="true" placeholder="请输入排除词" />

		<u-popup v-model="isFilter" mode="bottom" border-radius="30">
      <div class="top flex">
        <u-icon class="icon" name="arrow-down" size="32" @click="cancel"></u-icon>
        <span class="confirm" @click="confirm">确定</span>
      </div>
      <div class="sorts flex">
        <div class="sort" :class="params.top_search_range.includes(item.value) && 'on'" v-for="(item, index) in searchType" :key="index" @click="typeChange(item.value)">{{ item.label }}</div>
				<b class="sort"></b>
      </div>
			<div class="btn" @click="cancel">取消</div>
		</u-popup>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					top_search_range: [1,2],
					top_search_value: "",
					exclude_word: "",
					order_by: 3,
				},
				top_search_range_tmp: [],
				historyWords: [],
				isFilter: false,
				searchType: [
					{label: "正文", value: 1},
					{label: "标题", value: 2},
					{label: "原文", value: 3},
					{label: "作者", value: 4},
					{label: "来源", value: 5},
					{label: "签到地", value: 6},
					{label: "发布地", value: 7},
				],
			}
		},
		created() {
			this.historyWords = !uni.getStorageSync("historyWords") ? [] : uni.getStorageSync("historyWords");
		},
		methods: {
			search() {
				if(!this.params.top_search_value.length){
					this.$refs.uToast.show({
						title: "请输入关键词",
						type: "error",
					});
					return;
				}
				if(this.historyWords.includes(this.params.top_search_value)){
					this.historyWords = this.historyWords.filter(i=>i!==this.params.top_search_value);
				}
				this.historyWords.unshift(this.params.top_search_value);
				uni.setStorageSync("historyWords", this.historyWords);
				uni.navigateTo({
					url: "/pages/globallist/globallist?data="+encodeURIComponent(JSON.stringify(this.params))
				});
			},
			historySearch(val) {
				this.params.top_search_value = val;
				uni.navigateTo({
					url: "/pages/globallist/globallist?data="+encodeURIComponent(JSON.stringify(this.params))
				});
			},
			clear() {
				this.historyWords = [];
				uni.removeStorageSync("historyWords");
			},
			openFilter() {
				this.isFilter = true;
				this.top_search_range_tmp = this.params.top_search_range;
			},
			cancel() {
				this.params.top_search_range = this.top_search_range_tmp;
				this.isFilter = false;
			},
			typeChange(val){
				if(this.params.top_search_range.includes(val)){
					this.params.top_search_range = this.params.top_search_range.filter(item=>item!=val);
				}else{
					this.params.top_search_range.push(val);
				}
			},
			confirm() {
				this.isFilter = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
.searchinput{
	padding: 20rpx;
}
.navbar-slot{
	width: 100%;
	justify-content: flex-end;
	padding-right: 40rpx;
	.search{
		color: #1E62FC;
		font-size: 30rpx;
	}
}
.title{
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	.text{
		font-size: 32rpx;
	}
	.gray,.clear{
		font-size: 30rpx;
		color: #666;
	}
	.filter{
		cursor: pointer;
		width: 40rpx;
		height: 40rpx;
		margin: 0 10rpx;
		background: url(./../../static/filter-records.png) no-repeat center/contain;
	}
}
.history{
	flex-wrap: wrap;
	.kw{
		padding: 6rpx 16rpx;
		border: 1rpx solid #ccc;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
}
.top{
  font-size: 36rpx;
  font-weight: bold;
  padding: 20rpx;
  border-bottom: 1rpx solid #F0F0F0;
  justify-content: space-between;
  align-items: center;
  .icon{
    cursor: pointer;
  }
  .confirm{
    cursor: pointer;
    font-size: 32rpx;
    color: #1E62FC;
  }
}
.sorts{
  padding: 20rpx;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: space-around;
  .sort{
    cursor: pointer;
    box-sizing: border-box;
    width: 48%;
    padding: 16rpx 0;
    text-align: center;
    border: 1rpx solid #F0F0F0;
    border-radius: 8rpx;
    margin-bottom: 2%;
    color: #333;
  }
  .on{
    color: #fff;
    background-color: #1E62FC;
    border: 1rpx solid #1E62FC;
  }
	b{
		opacity: 0;
	}
}
.btn{
	border-top: 2rpx solid #eee;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	cursor: pointer;
	font-size: 32rpx;
	
	&:active{
		opacity: 0.9;
	}
}
</style>
